<template>
  <div class='role'>
    <page-search
      :search-config='searchConfig'
      @handle-search='handleSearch'
      @handle-reset='handleReset'
    />
    <page-content
      :content-config='contentConfig'
      @edit-user-fn='handleEdit'
      @create-user-fn='createUser'
      ref='contentRef'
    />
    <page-modal
      :modal-config='modalConfig'
      :other-info='otherInfo'
      ref='modalRef'
    >
      <template #menuList>
        <el-tree
          ref='treeRef'
          :data='entireMenus'
          show-checkbox
          node-key='id'
          @check='handleElTreeCheck'
          highlight-current
          :props="{ children: 'children', label: 'name' }"
        />
      </template>
    </page-modal>
  </div>
</template>

<script setup lang='ts'>
import PageSearch from '@/components/page-search/page-search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import PageModal from '@/components/page-modal/page-modal.vue'
import searchConfig from '@/views/main/system/role/config/search.config'
import contentConfig from '@/views/main/system/role/config/content.config'
import modalConfig from '@/views/main/system/role/config/modal.config'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'
import useMainStore from '@/stores/main/main'
import { storeToRefs } from 'pinia'
import { nextTick, reactive, ref } from 'vue'
import { ElTree } from 'element-plus'
import { mapMenuListToIds } from '@/utils/map-menus'

const { contentRef, handleSearch, handleReset } = usePageContent()

const { modalRef, showModal: createUser, handleEdit } = usePageModal(newCallback, editCallback)

const mainStore = useMainStore()
const { entireMenus } = storeToRefs(mainStore)

let otherInfo = reactive<any>({})
const treeRef = ref<InstanceType<typeof ElTree>>()

function handleElTreeCheck(data1: any, data2: any) {
  const menuList = [...data2.checkedKeys, ...data2.halfCheckedKeys]
  otherInfo = { menuList: menuList }
  console.log(otherInfo)
}

// 编辑数据回显
function editCallback(itemData: any) {
  nextTick(() => {
    const menuIds = mapMenuListToIds(itemData.menulist)

    treeRef.value?.setCheckedKeys([1, 2, 3])
  })
}

function newCallback() {
  nextTick(() => {
    treeRef.value?.setCheckedKeys([])
  })
}
</script>

<style scoped lang='less'>
.role {
}
</style>
